/* 分组框 */
<template>
  <div class="collapse-config">
    <je-form-item label="快速定位" name="quickPositioning">
      <je-switch v-model:value="formState.quickPositioning" mode="checkbox" />
      <!-- <je-checkbox v-model:checked="formState.quickPositioning" /> -->
      <span class="prompt">启动后可完成快速定位。</span>
    </je-form-item>

    <je-form-item label="保持收起" name="keepUp">
      <je-switch v-model:value="formState.keepUp" mode="checkbox" />
      <!-- <je-checkbox v-model:checked="formState.keepUp" /> -->
      <span class="prompt">启动后默认分组框是收起状态。</span>
    </je-form-item>

    <je-form-item label="无样式" name="noStyle">
      <je-switch v-model:value="formState.noStyle" mode="checkbox" />
      <!-- <je-checkbox v-model:checked="formState.noStyle" /> -->
      <span class="prompt">启动后分组框将清空标题所有样式。</span>
    </je-form-item>

    <je-form-item label="组内标题宽" name="titleWidth">
      <je-input-number v-model:value="formState.titleWidth" addon-after="px" style="width: 100%" />
    </je-form-item>

    <je-form-item label="框内背景颜色" name="bgColor">
      <je-color v-model:value="formState.bgColor"></je-color>
    </je-form-item>
    <je-form-item label="边框颜色" name="borderColor">
      <je-color v-model:value="formState.borderColor"></je-color>
    </je-form-item>
    <je-form-item label="标题颜色" name="titleColor">
      <je-color v-model:value="formState.titleColor"></je-color>
    </je-form-item>
    <je-form-item label="标题背景颜色" name="titleBgColor">
      <je-color v-model:value="formState.titleBgColor"></je-color>
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch, ref } from 'vue';
  import { Form, InputNumber, Switch, Color } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';

  export default defineComponent({
    name: 'CollapseConfig',
    components: {
      JeFormItem: Form.Item,
      JeSwitch: Switch,
      JeColor: Color,
      JeInputNumber: InputNumber,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        quickPositioning: config.quickPositioning || '0', //快速定位
        keepUp: config.keepUp || '0', //保持收起
        noStyle: config.noStyle || '0', //无样式
        titleWidth: config.titleWidth || '', //组内标题宽
        bgColor: config.bgColor || '', //分组框背景
        titleColor: config.titleColor || '', //标题色
        titleBgColor: config.titleBgColor || '', //标题背景色
        borderColor: config.borderColor || '', //边框色
      });

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      return { formState };
    },
  });
</script>
<style lang="less" scoped></style>
